{extend name="extra@admin/content"}

{block name="content"}
<form onsubmit="return false;" action="__SELF__" data-auto="true" method="post" class='layui-form' style='padding-top:20px'>
    <div class="layui-form-item" id="add">
        <div class="layui-inline">
            <label class="layui-form-label">添加属性</label>
        <input type="button" lay-filter="add" onclick="tianjia();" value="+" ></button>
        </div>
    </div>
    <div class="hr-line-dashed"></div>
    <div class="col-sm-4 col-sm-offset-2">
        {if isset($id)}<input type='hidden' value='{$id}' name='id'/>{/if}
        <div class="layui-form-item text-center">
            <button class="layui-btn" type="submit">保存配置</button>
        </div>
    </div>
    <script type="text/javascript">
    layui.use('form', function(){
        var form = layui.form;      //只有执行了这一步，部分表单元素才会自动修饰成功
        form.render();
    });
    function tianjia(){
        var ht = '<div class="layui-form-item"><div class="layui-inline"><label class="layui-form-label">属性</label><div class="layui-input-inline"><select name="spec_id[]" lay-verify="required" lay-search>{volist name="spec_cate" id="v1"}<option value="{$v1.id}" >{$v1.name}</option>{/volist}</select></div><div class="layui-input-inline" style="width: 100px;"><input type="text" name="spec[]" required="required" placeholder="请输入属性名称" autocomplete="off" class="layui-input"></div><button onclick="reduce(this)">-</button></div>';
        var html = ht;
        $("#add").before(html);
        window.form.render('select'); //刷新select选择框渲染
    }
    function reduce(obj){
        $(obj).parent().remove();
    }
</script>

</form>
<style>
.ibox-content{
    overflow-y: scroll;
    overflow-x: hidden;
    height: 500px;
}
</style>
{/block}